<template>

  <div style="height:100vh;overflow: hidden;" id='photo'>
    <drawer :show.sync="drawerVisibility" :show-mode="showModeValue" :placement="showPlacementValue" :drawer-style="{'background-color':'#35495e', width: '200px'}" style="height:100vh">

      <div slot="drawer">
        1111
      </div>

      <view-box ref="viewBox" style="height:100%;">
        <x-header slot="header" :left-options="{backText: ''}" style="" title="我的相册">
          <a href="./#/racelist" style="font-size:24px" slot="right">
            <i class="fa fa-home fa-fw"></i>
          </a>
        </x-header>

        <div>

          <ul style="height:calc(100vh - 100px);max-width:850px">
            <vue-waterfall-easy v-if='list.length!=0&&!!isShow' @click.native="goLink('photo',$event)" :width="850" @preloaded='hidden' :loadingDotStyle="{}" :loadingDotCount='length' :reachBottomDistance='10' :imgsArr="list" @scrollReachBottom="getList">
              <div class="img-info" :data-id='props.value.id' slot-scope="props">
                <p class="some-info">{{props.value.name}}</p>
                <p class="some-info">{{props.value.name}}</p>
              </div>
            </vue-waterfall-easy>
            <div class="no-more" v-if='list.length==0&&!!isShow'>
              暂无相册
            </div>

          </ul>

        </div>

        <myFooter :page="pageConfig"></myFooter>
      </view-box>

    </drawer>

  </div>

</template>


<script type="text/ecmascript-6">
/* eslint-disable*/
const countTime = 60; //倒数计时60秒

import Myheader from "@/common/components/myheader.vue";
import { cookie } from "vux";
import myFooter from "@/common/components/myfooter.vue";
import vueWaterfallEasy from "vue-waterfall-easy";
import mixin from "@/common/js/mixin";
//import {host} from "@/api/config";
//let host = "http://jiangtao.v3.ihuipao.com/";

import {
  Previewer,
  CellBox,
  Card,
  Panel,
  XHeader,
  Search,
  debounce,
  XInput,
  Group,
  XButton,
  Grid,
  GridItem,
  FormPreview,
  ViewBox,
  Cell,
  LoadMore,
  Actionsheet,
  Toast,
  Confirm,
  Scroller,
  Spinner,
  Flexbox,
  Drawer,
  FlexboxItem,
  TransferDomDirective as TransferDom
} from "vux";

import qs from "qs";
import { axios } from "@/api/axios.js";
import { indexedDB } from "@/api/indexedDB.js";
import CircleMenu from "vue-circle-menu";

import { isIdNumber, setTitle } from "@/common/js/main.js";

export default {
  mixins: [mixin],
  props: ["host"],
  data() {
    return {
      logIndexChange(arg) {
        //console.log(arg);
      },
      options: {
        getThumbBoundsFn(index) {
          // find thumbnail element
          let thumbnail = document.querySelectorAll(".img-box")[index];
          //console.log(thumbnail);
          // get window scroll Y
          let pageYScroll =
            window.pageYOffset || document.documentElement.scrollTop;
          // optionally get horizontal scroll
          // get position of element relative to viewport
          let rect = thumbnail.getBoundingClientRect();
          // w = width
          return { x: rect.left, y: rect.top + pageYScroll, w: rect.width };
          // Good guide on how to get element coordinates:
          // http://javascript.info/tutorial/coordinates
        }
      },
      list: [],
      showContent001: false,
      showMore: true,
      type: "5",
      config: {
        perpage: 8, //分页数量
        page: 1, //当前页数
        hasmorepage: false //是否还有分页
      },
      searchConfig: {},
      showModeValue: "overlay",
      showPlacementValue: "right",
      stop: false,
      drawerVisibility: false,
      demo4Value: {
        pullupStatus: "default"
      },
      pageConfig: window.pageConfig,
      value: "",
      wapperWidth: 0,
      page: 12,
      marigin: 10,
      length: 3,
      isShow: false
    };
  },
  computed: {},
  beforeCreate() {
    if (
      //如果没有_sid就去登录
      typeof cookie.get("_sid") == "undefined" ||
      window.localStorage.getItem("isLogin") == "false"
    ) {
      this.$router.push({ path: "login" });
    }
    setTitle("我的相册");
    window.onresize = function() {
      this.wapperWidth = document.querySelector("#app").clientWidth;
      //console.log(this.wapperWidth);
    };
  },
  created() {
    this.getList();
  },
  mounted() {},
  methods: {
    show() {
      let i;
      var imgBox = document.querySelectorAll(".img-box img");

      Array.prototype.forEach.call(imgBox, (item, index) => {
        if (event.target == item) {
          i = index;
        }
      });
      this.$refs.previewer.show(i);
    },
    hidden() {
      //alert(this.stop)
      if (this.stop) {
        this.length = 0;
      }
    },
    goLink(routerName, event) {
      let _this = this;
      var target = event.target;
      console.log(target);
      if (target.className.indexOf("img-box") !== -1) {
        target = target;
      } else if (target.className.indexOf("img-box") === -1) {
        var x = target;

        while (x.className.indexOf("img-box") === -1) {
          x = x.parentNode;
          if (x.className.indexOf("img-box") !== -1) {
            target = x;
          }
        }
      }

      let id = target.querySelector(".img-info").getAttribute("data-id");
      _this.$router.push({ path: routerName, query: { id: id } });
      //console.log(target.querySelector('.img-info').getAttribute('data-id'))
      //console.log(target);
      //_this.$router.push({ path: routerName, query: { race_id: photoId } });
    },
    // load4() {
    //   this.demo4Value.pullupStatus = "up";
    //   this.config.perpage += 8;
    //   this.getList(this.searchConfig);
    //   this.$nextTick(() => {
    //     this.$refs.scroller.reset();
    //   });
    // },
    errorImg(index) {
      //console.log(index);
      //.src="http://placeholder.qiniudn.com/70x70/3cc51f/ffffff"
    },
    getList(config) {
      let _this = this;
      //alert(1)
      //console.log(window.localStorage.getItem("account"));
      // //account:
      // if (!!this.stop) {
      //   // setTimeout(() => {
      //   //   document.querySelector(".ball-beat").style.display = "none";
      //   // }, 0);
      //   return;
      // }

      axios
        .post(
          `${host}user/auth/album`,
          qs.stringify({ albumid: this.$route.query.id, page: this.page })
        )
        .then(
          response => {
            if (response.data.code == "200") {
              response.data.data.data.map(item => {
                item.src =
                  item.cover ||
                  "http://stor.ihuipao.cn/image/98dd5199b5eacd3e37ae483e75d6c5e5.jpg";
              });

                    this.isShow = true;

              console.log(response.data.data);

              this.page += 20;

              var myarray = [];

              var _reduce = function(array, key) {
                var arr = array;
                var hash = {};
                arr = arr.reduce(function(item, next) {
                  hash[next[key]]
                    ? ""
                    : (hash[next[key]] = true && item.push(next));
                  return item;
                }, []);
                return arr;
              };

              //alert(JSON.stringify(_reduce(this.list , "src")))
              myarray = this.list.concat(response.data.data.data);
              //console.warn('过滤前')
              //console.warn(myarray)
              myarray = _reduce(myarray, "id");
              //console.warn('过滤后')
              //console.warn(myarray)
              this.list = myarray;

              //this.list=response.data.data.data
              //console.log(this.list);
              //this.list = this.list.concat(myarray);
              //console.log("----list-----");
              //console.log(this.list);
              //this.list = response.data.data.data;
              //console.log(this.list);
              if (this.list.length >= response.data.data.total) {
                this.stop = true;
              } else if (response.data.data.length == 0) {
                this.stop = false;
              } else {
                this.stop = false;
              }

              //_this.demo4Value.pullupStatus = "default";

              //console.log(response.data.data);
            }
          },
          error => {
            console.log(error);
          }
        );
    }
  },
  directives: {
    TransferDom
  },
  components: {
    Previewer,
    CellBox,
    Card,
    Panel,
    XHeader,
    Search,
    myFooter,
    debounce,
    XInput,
    Group,
    XButton,
    Grid,
    GridItem,
    FormPreview,
    ViewBox,
    Cell,
    LoadMore,
    Actionsheet,
    Toast,
    Myheader,
    Confirm,
    Flexbox,
    Drawer,
    Scroller,
    Spinner,
    CircleMenu,
    FlexboxItem,
    vueWaterfallEasy
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" rel="stylesheet/less">
body,
html {
  height: 100%;
  width: 100%;
  overflow-x: hidden;
}

#photo {
  .listwarpper {
    img {
      width: 50%;
      vertical-align: middle;
    }
  }
  .weui-tab__panel {
    height: auto;
    padding-bottom: 0;
  }

  .some-info {
    line-height: 1.6;
    text-align: center;
  }
  .no-more {
    font-size: 17px;
    text-align: center;
    line-height: 30vh;
  }
}
</style>






